<template>
  <div class="weekAnalysis_echarts">
    <div ref="week_echarts" class="week_echarts"> </div>
  </div>
</template>

<script setup lang="ts" name="weekEcharts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const week_echarts = ref(null)
const init_Ehcarts = () => {
  const weekEcharts = echarts.init(week_echarts.value)

  let option = {
    backgroundColor: 'white',

    title: {
      // text: '区内对比-工业亩均产值',
      left: '10',
      top: "20",
      // padding: [10, 0, 0, 50],
      textStyle: {
        color: "#000",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 600,
        // padding: [0, 0, 0, 35]
      },
    },

    tooltip: {
      trigger: 'axis',
      backgroundColor: "rgba(1, 13, 19, 0.5)",
      borderWidth: 0,
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        color: "rgba(212, 232, 254, 1)",
        // fontSize: fontChart(0.24),
      },
      confine: true
    },
    grid: {
      top: '25%',
      left: '5%',
      right: '5%',
      bottom: '8%',
      containLabel: true,
    },
    legend: {
      data: ['新用户', '活跃用户'],
      left: "center",
      top: 30,
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 15,
      borderRadius: 4,
      textStyle: {
        color: "#000",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 400,
      },
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        show: false,
        lineStyle: {
          color: '#ECECEC'
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        show: true,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: '#666666'
        }
      },
    },

    yAxis: {
      name: '（数量）',
      nameTextStyle: {
        color: "#000",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 600,
        padding: [10, 0, 0, -30]
      },
      nameGap: 25,  // 表现为上下位置
      type: 'value',
      //max:'5000',
      axisLine: {
        show: false,
        lineStyle: {
          color: '#666666',
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ECECEC'
        }
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: '#393939',
          fontSize: 12
        }
      }
    },
    series: [{
      name: '新用户',
      type: 'bar',
      barWidth: '25',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#7E7CEB'
          }, {
            offset: 1,
            color: '#79C7F3'
          }]),

        },
      },
      data: [120, 100, 50, 30, 60, 80, 60]
    },

    {
      name: '活跃用户',
      type: 'bar',
      barWidth: '25',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#F98563'
          }, {
            offset: 1,
            color: '#FBAC69'
          }]),

        }
      },
      data: [200, 300, 400, 800, 600, 250, 350]
    },
    ]
  };

  option && weekEcharts.setOption(option)

}
onMounted(() => {
  init_Ehcarts()
})
</script>

<style scoped lang="less">
.weekAnalysis_echarts {
  .week_echarts {
    width: 100%;
    height: 310px;
  }
}
</style>